<template>
	<div class="song-sheet-list" v-if="songData[0] && songData[0].name">
		<el-divider content-position="left">歌曲列表</el-divider>
		<el-row>
		  <el-col :span="1" class="content"></el-col>
		  <el-col :span="2" class="content"></el-col>
			<el-col :span="7"><p class="song-table">音乐标题</p></el-col>
			<el-col :span="6"><p class="song-table">歌手</p></el-col>
			<el-col :span="6"><p class="song-table">专辑</p></el-col>
			<el-col :span="2"><p class="song-table">时长</p></el-col>
		</el-row>
		<el-row
			v-for="(item, index) in songData" 
			:key="index" class="song-list" 
			@click.native="playMusic(item)"
			:class="[item.id == ($store.state.musicList[0] && $store.state.musicList[$store.state.currentPlayMusic].id) ? 'active': '']"
			>
			<el-col :span="1" class="center">
				<span v-show="item.id != ($store.state.musicList[0] && $store.state.musicList[$store.state.currentPlayMusic].id)">{{ index + 1 }}</span>
				<i class="el-icon-headset" v-show="item.id == ($store.state.musicList[0] && $store.state.musicList[$store.state.currentPlayMusic].id)"></i>
			</el-col>
			<el-col :span="2" class="center">
				<img v-lazy="item.al.picUrl + '?param=120y120'" class="img">
			</el-col>
			<el-col :span="7" class="song-table-name">
				<p><span>{{ item.name }}<i class="el-icon-video-camera" v-if="item.mv" @click.stop="mvClick(item.mv)"></i></span></p>
			</el-col>
			<el-col :span="6" class="song-table-name"><p><span>{{ item.ar[0].name }}</span></p></el-col>
			<el-col :span="6" class="song-table-name"><p><span>{{ item.al.name }}</span></p></el-col>
			<el-col :span="2" class="song-table-name"><p><span>{{ item.dt | formatTime}}</span></p></el-col>
		</el-row>
	</div>
</template>

<script>
	import { formatTime } from "@/assets/tool.js"
	export default {
		name: 'songSheetList',
		props: ["songData"],
		filters: {
			formatTime(time) {
				return formatTime(time / 1000);
			}
		},
		methods: {
			// 点击音乐
			playMusic(item) {
				this.$store.commit({
					type: 'addMusicList',
					id: item.id,
					musicName: item.name,
					name: item.ar.name
				})
			},
			// 点击播放全部
			playAll() {
				for (let i=0; i<this.songData.length; i++) {
					this.$store.commit({
						type: 'addMusicList',
						id: this.songData[i].id,
						musicName: this.songData[i].name,
						name: this.songData[i].ar.name
					})
				}
				this.$message('已全部添加进歌单了哦~');
			},
			// 点击mv
			mvClick(id) {
				this.$router.push({name:'mv',params: {id: id}});
			},
			aaa(id) {
				console.log(id)
			}
		}
		
	}
</script>

<style lang="less" scoped>
	.song-list {
		cursor: pointer;
		// transition: all .2s;
	}
	.song-list:hover {
		background-color: var(--hover-bgcolor);
	}
	.content::after {
		content: '.';
		opacity: 0;
	}
	.center {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--small-font-size);
		color: var(--secondary-font-color);
		min-height: 72px;
	}
	.song-sheet-list .img {
		width: 64px;
		height: 64px;
		border-radius: 5px;
	}
	.song-table {
		font-size: var(--small-font-size);
		color: var(--main-font-color);
		font-weight: bold;
	}
	.song-table-name {
		min-height: 72px;
		display: flex;
		align-items: center;
		font-size: var(--small-font-size);
		color: var(--main-font-color);
	}
	.el-icon-video-camera {
		position: relative;
		top: 3px;
		font-size: 20px;
		margin-left: 15px;
		color: var(--blue);
	}
	.el-icon-video-camera:hover {
		color: var(--deep-blue-hover-bgcolor);
	}
	.active p,i{
		color: var(--blue);
	}
	.active i {
		font-size: 18px;
	}
</style>
